<template>
  <div class="cop-rank">
    <div
      class="rank"
      :class="'item' + (index + 1)"
      v-for="(item, index) in rankListData"
      :key="index"
    >
      <div :class="'value' + (index + 1)">{{ item.value }}</div>
      <div :class="'score' + (index + 1)">{{ "NO." + (index + 1) }}</div>
      <div :class="'name' + (index + 1)">{{ item.savedTime }}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "coprank",
  filters: {
    copStatus(value) {
      return value > 5
        ? "优异"
        : value > 4.1 && value < 5
        ? "良好"
        : value > 3.5 && value < 4.1
        ? "一般"
        : value < 3.5
        ? "改造"
        : "-";
    },
  },
  components: {},
  props: ["rankList"],
  created() {},
  data() {
    return {};
  },
  methods: {},
  computed: {
    rankListData() {
      if (this.rankList.length == 3) {
        this.rankList.push({});
      }
      return this.rankList;
    },
  },
};
</script>
<style lang="less" scoped>
.cop-rank {
  margin: 0 auto;
  width: 440px;
  height: 160px;
  background: url("../../../assets/img/vdfn.png") no-repeat;
  background-size: cover;
  //   background-color: #a76969;
  display: flex;
  justify-content: space-around;
  padding: 0 40px;
  //   align-items: center;
  .rank {
    width: 60px;
    // margin: 0 3%;
    height: 100px;
    position: relative;
    font-size: 12px;
    // background-color: rgba(126, 49, 207, 0.8);
  }
  .item1 {
    // background: rgba(112, 212, 30, 0.6);
    // margin-left: 12.5%;
    color: #d9cb60;
    text-align: center;
    .value1 {
      position: absolute;
      width: 100%;
      height: 10%;
      top: -15%;
      left: -5%;

      // background: rgba(4, 13, 41, 0.5);
    }
    .score1 {
      position: absolute;
      width: 100%;
      height: 10%;
      left: -4%;

      // background: rgba(11, 54, 182, 0.5);
    }
    .name1 {
      position: absolute;
      width: 80%;
      height: 30%;
      left: 4%;
      top: 20%;

      // background: rgba(129, 76, 7, 0.5);
    }
  }
  .item2 {
    // background-color: rgba(96, 203, 189, 0.6);
    color: #60cbbd;
    text-align: center;
    .value2 {
      position: absolute;
      width: 100%;
      height: 10%;
      top: -1%;
      // background: rgba(4, 13, 41, 0.5);
    }
    .score2 {
      position: absolute;
      top: 15%;
      width: 100%;
      height: 10%;
      // background: rgba(11, 54, 182, 0.5);
    }
    .name2 {
      position: absolute;
      width: 80%;
      height: 30%;
      left: 7%;
      top: 30%;
      // background: rgba(129, 76, 7, 0.5);
    }
  }
  .item3 {
    // background-color: rgba(96, 203, 189, 0.6);
    color: #4480c2;
    text-align: center;
    .value3 {
      position: absolute;
      width: 100%;
      height: 10%;
      top: 12%;
      left: 5%;

      // background: rgba(4, 13, 41, 0.5);
    }
    .score3 {
      position: absolute;
      width: 100%;
      height: 10%;
      top: 30%;
      left: 5%;
      // background: rgba(11, 54, 182, 0.5);
    }
    .name3 {
      position: absolute;
      width: 80%;
      height: 30%;
      left: 14%;
      top: 45%;
      // background: rgba(129, 76, 7, 0.5);
    }
  }
  .item4 {
    // background-color: rgba(96, 203, 189, 0.6);
    // margin-right: 13%;
    color: #8394f3;
    text-align: center;
    .value4 {
      position: absolute;
      width: 100%;
      height: 10%;
      left: 5%;
      top: 38%;
      //   background: rgba(4, 13, 41, 0.5);
    }
    .score4 {
      position: absolute;
      width: 100%;
      height: 10%;
      top: 55%;
      left: 5%;
      //   background: rgba(11, 54, 182, 0.5);
    }
    .name4 {
      position: absolute;
      width: 80%;
      height: 30%;
      left: 16%;
      top: 70%;
      //   background: rgba(129, 76, 7, 0.5);
    }
  }
}
</style>
